<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <!-- <Nav /> -->
        <el-card shadow="never" class="cardBox">
          <el-radio-group v-model="currTab">
            <el-radio-button
              :label="item.id"
              v-for="(item, idx) of tabdata"
              :key="idx"
            >{{ item.name }}</el-radio-button>
          </el-radio-group>
        </el-card>
        <el-row v-show="Number(currTab) === 0">
          <el-row type="flex" justify="space-between" :gutter="20" class="mr_vertical_10">
            <el-col :span="12">
              <QuotationStatistics :data="offer" />
            </el-col>
            <el-col :span="12">
              <TransactionStatistics :data="order" />
            </el-col>
          </el-row>

          <el-row type="flex" justify="sapce-between" class="mr_vertical_10" :gutter="20">
            <el-col :span="12">
              <Trend :data="trendData1" :peroids="peroids" />
            </el-col>
            <el-col :span="12">
              <Trend :data="trendData2" :peroids="peroids" />
            </el-col>
          </el-row>
          <el-row type="flex" justify="sapce-between" class="mr_vertical_10" :gutter="20">
            <el-col :span="12">
              <Ranking :data="rankData1" />
            </el-col>
            <el-col :span="12">
              <Ranking :data="rankData2" />
            </el-col>
          </el-row>
        </el-row>
        <el-row v-show="Number(currTab) === 1" class="mr_vertical_10">
          <el-row>
            <AccountList />
          </el-row>
          <el-row class="mr_vertical_10">
            <AccountTab />
          </el-row>
        </el-row>

        <el-row v-show="Number(currTab) === 2" class="mr_vertical_10">
          <SystemConfigure />
        </el-row>
        <el-row v-show="Number(currTab) === 3" class="mr_vertical_10">
          <BranchList />
          <el-row class="mr_vertical_10">
            <WireList />
          </el-row>
        </el-row>
      </template>
    </BaseSlot>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import QuotationStatistics from "./common/quotationStatistics.vue";
import TransactionStatistics from "./common/Statistics.vue";
import Ranking from "./common/ranking.vue";
import Trend from "./common/trend.vue";
import AccountList from "./common/accountList.vue";
import AccountTab from "./common/accountTab.vue";
import SystemConfigure from "./common/systemConfigure.vue";
import BranchList from "./common/branchList.vue";
import WireList from "./common/wireList.vue";

@Component({
  components: {
    BaseSlot,
    QuotationStatistics,
    TransactionStatistics,
    Ranking,
    Trend,
    AccountList,
    AccountTab,
    SystemConfigure,
    BranchList,
    WireList
  }
})
export default class MyApplication extends Vue {
  protected offer: any = {};
  protected buyRanks: any = [];
  protected saleRanks: any = [];
  protected peroids: any = {
    total_qty: [],
    time: [],
    avg_price: []
  };
  protected order: any = {};

  protected currTab: any = 0;
  protected tabdata: any = [
    { name: "运营统计", id: 0 },
    { name: "账户管理", id: 1 },
    { name: "系统配置", id: 2 },
    { name: "电网拓扑", id: 3 }
  ];
  protected rankData1: any = {
    idName: "salesRank",
    title: "售电排行",
    did: [],
    totalList: []
  };
  protected rankData2: any = {
    idName: "buyRank",
    title: "购电排行",
    did: [],
    totalList: []
  };
  protected trendData1: any = {
    idName: "sys_numbers",
    titleName: "交易量曲线",
    color: "#077BE8",
    yName: "交易量（度）"
  };
  protected trendData2: any = {
    idName: "sys_price",
    titleName: "交易价格曲线",
    color: "#FFD400",
    yName: "交易价格（元）"
  };
  protected async created() {
    this.$nextTick(async () => {
      await this.getAdminTxns();
    });
  }
  protected async getAdminTxns() {
    const result: any = await this.$api.getAdminTxns().then((res: any) => {
      const {
        data: { offer, buy_ranks, order, peroids, sale_ranks }
      }: any = res;
      this.offer = offer;
      this.buyRanks = buy_ranks;
      this.order = order;
      // this.peroids = peroids
      peroids.forEach((item: any) => {
        this.peroids.time.push(item.time);
        this.peroids.total_qty.push(item.total_qty);
        this.peroids.avg_price.push(Vue.prototype.$coinToYuan(item.avg_price));
      });
      // this.peroids.time = peroids.map((item: any) => {
      //   return item.time;
      // });
      // this.peroids.total_qty = peroids.map((item: any) => {
      //   return item.total_qty;
      // });
      // this.peroids.avg_price = peroids.map((item: any) => {
      //   return Vue.prototype.$coinToYuan(item.avg_price);
      // });
      this.rankData1.did = sale_ranks.map((item: any, idx: number) => {
        return item.did;
      });
      this.rankData1.totalList = sale_ranks.map((item: any, idx: number) => {
        return { value: item.total_qty, name: item.did };
      });
      this.rankData2.did = buy_ranks.map((item: any, idx: number) => {
        return item.did;
      });
      this.rankData2.totalList = buy_ranks.map((item: any, idx: number) => {
        return { value: item.total_qty, name: item.did };
      });
      // this.rankData2.total_qty = buy_ranks.map((item: any) => {
      //   return item.total_qty
      // })
      // this.saleRanks = sale_ranks;
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
</style>


